<template>
    <div class="book-shop"> 
        <ul class="shop-list">
            <li v-for="(shop,i) in list" :key="shop.name">
                <h2>
                     <div class="checkbox" :class="{'selected':shop.books.every(i=>i.selected)}" @click="toggleShop(i)"></div>
                    {{shop.name}}
                </h2>
                <ul class="book-list">
                    <li v-for="(book,j) in shop.books" :key="book.name">
                        <div class="checkbox" :class="{'selected':book.selected}" @click="toggleBook(i,j)"></div>
                        <!-- <book-item :book="book" @change="book.number+=$event" /> -->
                        <book-item :book="book" @change="onChange(i,j,$event)" />
                    </li>
                </ul>
                <p>{{shop.fee>0?'满'+shop.fee+'元包邮':'包邮'}}</p>
            </li>
        </ul>
        <div class="total">
            <div class="checkbox" :class="{'selected':allSelected}" @click="toggleAll"></div>
            总价:{{total.total.toFixed(2)}}
            <!-- toFixed 取小数 -->
            <span v-if="total.fee>0">(包含邮费{{total.fee.toFixed(2)}}})</span>
        </div>
    </div>
</template>

<script>
import BookItem from '@/components/BookItem.vue'
    export default {
        components:{BookItem},
        data(){
            return{
                list:[
                    {
                        name:"凤凰书简",
                        books:[
                            {
                                name:"月光的合金",
                                cover:require("../assets/book-1.png"),
                                info:'全新',
                                price:41.4,
                                number:1,
                                selected:false
                            },
                            {
                                name:"广雅疏证",
                                cover:require("../assets/book-2.png"),
                                info:'全新',
                                price:136.8,
                                number:1,
                                selected:false
                            }
                        ],
                        fee:200 //包邮价格
                    },
                    {
                        name:"自由书店",
                        books:[
                            {
                                name:"越缦堂读书记",
                                cover:require("../assets/book-3.png"),
                                info:'九五品',
                                price:288,
                                number:1,
                                selected:false
                            }
                        ],
                        fee:0 //包邮价格
                    }
                ],
                BookItem
            }
        },
        methods:{
            onChange(i,j,val){
                this.list[i].books[j].number+=val
            },
            toggleBook(i,j){
                this.list[i].books[j].selected=!this.list[i].books[j].selected
            },
            toggleShop(i){
                //判断该书店下的所有书都选上了
                const selected = this.list[i].books.every(i=>i.selected)
                this.list[i].books=this.list[i].books.map(i=>{
                    return {
                        ...i,
                        selected:!selected
                    }
                })
            },
            toggleAll(){
                // this.list.forEach(shop =>{
                //     shop.books=shop.books.map(i=>{
                //         return {
                //             ...i,
                //             selected:!this.allSelected
                //         }
                //     })
                // })
                const selected = this.allSelected
                this.list.forEach(shop =>{
                    shop.books=shop.books.map(i=>({
                            ...i,
                            selected:!selected
                    }))
                })
            }
        },
        computed:{
            allSelected(){
                return this.list.every(shop=>{
                    return shop.books.every(book =>book.selected)
                })
            },
            total(){
                let total=0;//总价
                let fee=0;//邮费
                this.list.forEach(shop=>{
                    //shopTotal是每一家店铺的总价
                    let shopTotal = 0
                    shop.books.filter(i=>i.selected).forEach(book=>{

                        total += book.price*book.number
                        shopTotal += book.price*book.number
                    
                    })
                    //判断是否够包邮钱数,如果不够就给总价和总油费加上15元
                    if(shopTotal<shop.fee && shopTotal>0){
                        total+=15
                        fee+=15
                    }
                })
                return {
                    total,
                    fee
                }
            }
        }
    }
</script>

<style lang="sass" scoped>
.book-shop 
    text-align: left
    padding: 30px
    .shop-list h2
        display: flex
    .book-list li
        display: flex
        align-items: center
    .checkbox 
        position: relative
        height: 30px
        width: 30px
        border: 2px solid #666
        border-radius: 50%
        &.selected
            background: #666
            &:after
                content: ""
                position: absolute
                top: 8px
                left: 4px
                width: 15px
                height: 7px
                border-left: 2px solid #fff
                border-bottom: 2px solid #fff
                transform: rotate(-50deg)
    .total
        margin-top: 20px
        background: #f0f0f0
        djsplay: flex
        justify-content: space-between
</style>